<template>
  <div class="warrper-box" @scroll="handleScroll">
    <t-sticky>
      <t-navbar
        :title="detailData.authorName"
        :fixed="false"
        left-arrow
        @left-click="handleBack"
      />
    </t-sticky>

    <div class="swiper-box">
      <n-carousel
        draggable
        :centered-slides="true"
        :loop="false"
        @update:current-index="onChangeSwiper"
      >
        <div
          class="img-box"
          v-for="(item, index) in detailData.imageUrlList"
          :key="index"
        >
          <t-image
            class="image-container"
            :style="{ height: '100%', width: '100%' }"
            fit="fill"
            :lazy="true"
            :src="item"
            @click="clickBanner(item.id)"
          ></t-image>
        </div>
      </n-carousel>
    </div>
    <div>
      {{ swiperIndex }}/
      {{ detailData.imageUrlList && detailData.imageUrlList.length }}
    </div>
    <div class="info-box">
      <div class="name">{{ detailData.authorName }}</div>
      <div class="time">发布于：{{ detailData.updateTime }}</div>
    </div>
    <div class="book-box">
      <div class="tol-box">共{{ messageTol }}条评论</div>
      <t-list :async-loading="loadingTxt">
        <t-cell
          v-for="(item, index) in messageList"
          :key="index"
          class="message-item"
          align="middle"
        >
          <div class="head-box">
            <t-image class="img" :src="item.userAvatar"></t-image>
          </div>
          <div class="info">
            <div class="name">{{ item.userName }}</div>
            <div class="txt">{{ item.content }}</div>
            <div class="time">{{ item.createTime }}</div>
          </div>
        </t-cell>
      </t-list>
    </div>
    <div class="fixed-box">
      <div class="input-box">
        <t-input v-model="keyTxt" placeholder="请输入文字" />
      </div>
      <div :class="`btn ${keyTxt ? 'isuse' : ''}`" @click="onSubmitTxt">
        发布
      </div>
      <div class="dz-box" @click="onClickDz">
        <img
          v-if="detailData.isCollect == 0"
          class="img"
          src="@/assets/comic/icon-sc.png"
        />
        <img
          v-if="detailData.isCollect == 1"
          class="img"
          src="@/assets/comic/icon-sc-active.png"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, toRefs, toRaw, onUnmounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import Swiper from "@/components/Swiper";
import squareApi from "@/api/squareApi.js";
import comicApi from "@/api/comicApi";
const router = useRouter();
const route = useRoute();
let detailData = ref({});
let swiperIndex = ref(1);
let warrperBox = ref(null);
const state = reactive({
  keyTxt: "",
  loading: false,
  loadingTxt: "",
  messageList: [],
  pageData: {
    pageSize: 10,
    pageNum: 1,
    targetId: "",
    targetType: "photobook",
  },
  boforeSrcoll: 0,
  messageTol: 0,
});
const { keyTxt, loadingTxt, messageList, messageTol } = toRefs(state);
// 返回上一页
const handleBack = () => {
  router.back();
};
// 获取详情
async function getDetail() {
  const result = await squareApi.info({ id: route.query.id });
  if (result.code == 0) {
    detailData.value = result.data;
  }
}
// 轮播图
function onChangeSwiper(currentIndex, lastIndex) {
  swiperIndex.value = currentIndex + 1;
}
// 提交留言
async function onSubmitTxt() {
  if (state.keyTxt) {
    const data = await comicApi.saveComment({
      targetId: route.query.id,
      userId: localStorage.getItem("userInfo")
        ? JSON.parse(localStorage.getItem("userInfo")).userId
        : "",
      isAnonymous: 1,
      content: state.keyTxt,
      targetType: "photobook",
    });
    if (data.code == 0) {
      state.keyTxt = "";
      state.pageData.pageNum = 1;
      state.messageList = [];
      getMessageList();
    }
    console.log("d", data);
  }
}
// 获取留言页面
async function getMessageList() {
  state.pageData.targetId = route.query.id;
  state.loadingTxt = "加载中....";
  try {
    const result = await comicApi.getCommentList(toRaw(state.pageData));
    console.log("result", result);
    setTimeout(() => {
      state.loading = false;
    }, 300);
    state.loadingTxt = "";
    if (result.code == 0) {
      state.messageList = state.messageList.concat(result.data.records);
      state.messageTol = result.data.total;
    }
  } catch (e) {
    console.log("0000000000000000", e);
    setTimeout(() => {
      state.loading = false;
    }, 300);
    state.loadingTxt = "";
  }
}
function handleScroll(event) {
  const scrollTop = event.target.scrollTop;
  const offsetHeight = event.target.offsetHeight;
  const scrollHeight = event.target.scrollHeight;
  if (state.boforeSrcoll <= scrollTop) {
    state.boforeSrcoll = scrollTop;
  }
  if (
    scrollHeight - (offsetHeight + scrollTop) <= 10 &&
    state.boforeSrcoll <= scrollTop
  ) {
    if (!state.loading) {
      state.loading = true;
      state.pageData.pageNum++;
      getMessageList();
    }
  }
}
// 点赞
async function onClickDz() {
  const result = await squareApi.collect({
    photobookId: route.query.id,
  });
  console.log("sc", result);
  if (result.code == 0) {
    detailData.value.isCollect = detailData.value.isCollect == 0 ? 1 : 0;
  }
}
onMounted(() => {
  getDetail();
  getMessageList();
});
</script>
<style lang="scss" scoped>
:deep(.n-carousel__dots) {
  display: none;
}
:deep(.n-carousel__slides) {
  align-items: center;
}
:deep(.t-cell) {
  &::after {
    border: none;
  }
}
.warrper-box {
  padding-bottom: 60px;
  overflow: auto;
  height: 100vh;
  box-sizing: border-box;
  &::-webkit-scrollbar {
    display: none;
  }
}
.swiper-box {
  .img-box {
    display: flex;
    align-items: center;
  }
}
.info-box {
  padding: 10px;
  border-bottom: 1px solid $bf5-color;
  text-align: left;
  .name {
    font-size: 16px;
    font-weight: 700;
    color: $b10-color;
  }
  .time {
    font-size: 12px;
    color: $b6c-color;
  }
}
.book-box {
  .tol-box {
    text-align: left;
    font-size: 12px;
    color: $b6c-color;
    padding: 10px;
    padding-bottom: 0;
  }
  .message-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 10px;
    .head-box {
      padding: 0 10px;
      .img {
        width: 30px;
        height: 30px;
        display: block;
        border-radius: 50%;
        overflow: hidden;
      }
    }
    .info {
      border-bottom: 1px solid $be9-color;
      flex: 1;
      text-align: left;
      .name {
        font-size: 14px;
        color: $b6c-color;
      }
      .txt {
        font-size: 15px;
        font-weight: 700;
        color: $b10-color;
      }
      .time {
        font-size: 14px;
        color: $be9-color;
      }
    }
  }
}
.fixed-box {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 15px;
  background-color: #fff;
  border-top: 1px solid #e9e9e9;
  .input-box {
    flex: 1;
    padding-right: 10px;
    box-sizing: border-box;
    :deep(.t-input) {
      background-color: #e6e6e6;
      border-radius: 50px;
      padding: 6px 15px;
      font-size: 15px;
    }
  }
  .btn {
    width: 70px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    background-color: #e6e6e6;
    font-size: 16px;
    font-style: normal;
    font-weight: 750;
    color: $b6c-color;
    border-radius: 50px;
    &.isuse {
      background: linear-gradient(90deg, #fdda28 0%, #f1b444 100%);
      color: $b10-color;
    }
  }
  .dz-box {
    padding-left: 10px;
    .img {
      width: 22px;
      height: 22px;
      display: block;
    }
  }
}
</style>
